<template>
	<view>
		<view class="popup_bg"></view>
		<view class="popup">
			<image src="https://img.zzplc.net/stc/tsbg.png" class="popup_img"></image>
			<view class="popup_box">
				<image :src="userInfo.headimg" class="popup_box_avatar"></image>
				<view class="popup_box_name">{{userInfo.nickname}}</view>
				<view class="popup_box_box">
					<image src="/static/phone.png" class="popup_box_box_img"></image>
					<view class="popup_box_box_phone">{{userInfo.mobile}}</view>
				</view>
				<view class="popup_box_f">
					<view class="popup_box_f_l">本次考试得分：</view>
					<view class="popup_box_f_r">{{total}}</view>
					<view class="popup_box_f_l" style="margin-left: 20rpx;">分</view>
				</view>
			</view>
		</view>
		
		<view class="popup_button" @click="skip">{{total==100?'返回首页':'查看错题'}}</view>
		
		<image src="/static/popup_close.png" class="popup_close" @click="hidePopup"></image>
	</view>
</template>

<script>
	export default {
		name:"examResult",
		props: {
			total: {
				type: Number
			},
			answerid: {
				type: String
			},
			userInfo: {
				type: Object
			}
		},
		data() {
			return {
				
			};
		},
		
		methods: {
			// 关闭弹窗
			hidePopup(){
				this.$emit('click')
			},
			
			// 跳转
			skip(){
				if(this.total==100){
					uni.switchTab({
						url: '/pages/exam/exam'
					})
				}else{
					uni.navigateTo({
						url: '/pages/exam/mistakes?answerid='+this.answerid
					})
				}
				// console.log(this.total)
			},
		}
	}
</script>

<style lang="scss">
	.popup_bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		overflow: hidden;
		z-index: 1;
	}
	.popup{
		position: fixed;
		top: 150rpx;
		left: 85rpx;
		width: 580rpx;
		height: 820rpx;
		overflow: hidden;
		z-index: 2;
		
		&_img{
			margin-top: 70rpx;
			width: 580rpx;
			height: 750rpx;
			overflow: hidden;
		}
		&_box{
			position: absolute;
			top: 0;
			left: 30rpx;
			width: 518rpx;
			height: 480rpx;
			overflow: hidden;
			
			&_avatar{
				margin-left: 186rpx;
				width: 145rpx;
				height: 145rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			&_name{
				margin-top: 30rpx;
				width: 510rpx;
				height: 46rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 46rpx;
				color: #FFFFFF;
				line-height: 46rpx;
				text-align: center;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			&_box{
				margin-top: 20rpx;
				margin-left: 130rpx;
				height: 28rpx;
				overflow: hidden;
				
				&_img{
					float: left;
					margin-top: 1rpx;
					margin-right: 8rpx;
					width: 16rpx;
					height: 26rpx;
				}
				&_phone{
					float: left;
					height: 27rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 34rpx;
					color: #FFFFFF;
					line-height: 27rpx;
				}
			}
			&_f{
				margin-top: 81rpx;
				margin-left: 46rpx;
				height: 126rpx;
				
				&_l{
					float: left;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 126rpx;
				}
				&_r{
					float: left;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 72rpx;
					color: #FFFFFF;
					line-height: 126rpx;
				}
				
			}
		}
	}
	.popup_button{
		position: fixed;
		top: 1000rpx;
		left: 87rpx;
		width: 576rpx;
		height: 97rpx;
		background: #02ADA4;
		border-radius: 18rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 97rpx;
		overflow: hidden;
		z-index: 2;
	}
	
	.popup_close{
		position: fixed;
		bottom: 100rpx;
		left: 325rpx;
		width: 100rpx;
		height: 100rpx;
		z-index: 2;
	}
</style>